<template>
  <div class="app-container">
    <div style="color:red;text-align:center">*注意默认查询的全部统计数据，如果要具体查询的，请选择范围查询</div>
    <br>
    <el-tabs v-model="activeName" :stretch="true" @tab-click="handleClick">
      <el-tab-pane label="医生工作量统计列表" name="workload">
        <!-- 查询条件开始 -->
        <el-form ref="queryWorkloadFrom" :model="queryWorkloadParams" :inline="true" label-width="68px">
          <el-form-item label="医生名称" prop="doctorName">
            <el-input
                v-model="queryWorkloadParams.doctorName"
                placeholder="请输入医生名称"
                clearable
                size="small"
                style="width:180px"
            />
          </el-form-item>
          <el-form-item label="接诊时间" prop="visitDate">
            <el-date-picker
                v-model="queryWorkloadParams.createTime"
                size="small"
                style="width:240px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholde="开始日期"
                end-placeholde="结束日期"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleWorkloadQuery">搜索</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetWorkloadQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 查询条件结束 -->
        <!-- 数据表格开始 -->
        <el-table v-loading="loading" border :data="workloadList">
          <el-table-column label="挂号ID" prop="registrationNumber" align="center" />
          <!-- <el-table-column label="医生编号" prop="userId" align="center" /> -->
          <el-table-column label="医生姓名" prop="doctorName" align="center" />
          <el-table-column label="挂号费用" prop="registrationAmount" align="center" />
          <el-table-column label="患者姓名" prop="patientName" align="center" />
          <el-table-column label="就诊时间" prop="visitDate" align="center" />
        </el-table>
        <!-- 数据结束结束 -->
        <!-- 分页控件开始 -->
        <el-pagination
            v-show="queryWorkloadParams.total>0"
            :current-page="queryWorkloadParams.pageNum"
            :page-sizes="[5,10, 15, 20]"
            :page-size="queryWorkloadParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="queryWorkloadParams.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        <!-- 分页控件结束 -->
      </el-tab-pane>
      <el-tab-pane label="总体工作量统计列表" name="workloadStat">
        <!-- 查询条件开始 -->
        <el-form ref="queryWorkloadStatFrom" :model="queryWorkloadStatParams" :inline="true" label-width="68px">
          <el-form-item label="医生姓名" prop="doctorName">
            <el-input
                v-model="queryWorkloadStatParams.doctorName"
                placeholder="请输入医生姓名"
                clearable
                size="small"
                style="width:180px"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleWorkloadStatQuery">搜索</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetWorkloadStatQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 查询条件结束 -->
        <!-- 数据表格开始 -->
        <el-table v-loading="loading" border :data="workloadStatList" show-summary>
          <el-table-column label="医生编号" prop="userId" align="center" />
          <el-table-column label="医生姓名" prop="doctorName" align="center" />
          <el-table-column label="挂号总金额" prop="totalPrice" align="center" />
          <el-table-column label="接诊数量" prop="counts" align="center" />
        </el-table>
        <!-- 数据结束结束 -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 遮罩
      loading: false,
      // 被激活的tab名称
      activeName: 'workload',
      // 工作量总工作量数据
      workloadList: [],
      // 工作量的工作量数量数据
      workloadStatList: [],
      // 列表查询参数
      queryWorkloadParams: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
        doctorName: undefined,
        createTime:undefined
      },
      // 数量统计查询参数
      queryWorkloadStatParams: {
        doctorName: undefined,
        createTime:undefined,
      }
    }
  },
  created() {
    // 默认查询工作量列表
    this.listWorkload()
  },
  methods: {
    // 点击tab事件
    handleClick() {
      // console.log(this.activeName)
      if (this.activeName === 'workload') {
        this.listWorkload()
      } else {
        this.listWorkloadStat()
      }
    },
    // 查询工作量列表
    listWorkload() {
      this.$http.post("/registration/workload/queryRegistrationList", this.queryWorkloadParams).then(res => {
        //console.log(res.data)
        if (res.data.code === 200) {
          this.workloadList = res.data.data.list
          this.queryWorkloadParams.total = res.data.data.total
        }
      })
    },
    // 工作量列表查询
    handleWorkloadQuery() {
      this.listWorkload()
    },
    // 重置工作量列表查询
    resetWorkloadQuery() {
      this.queryWorkloadParams={
        pageNum: 1,
        pageSize: 5,
        total: 0,
        doctorName: undefined,
        createTime: undefined
      }
      this.listWorkload()
    },
    // 查询工作量列表
    listWorkloadStat() {
      this.$http.post("/registration/workload/list2", this.queryWorkloadStatParams).then(res => {
        //console.log(res.data)
        if (res.data.code === 200) {
          this.workloadStatList = res.data.data.data
        }
      })
    },
    // 工作量列表查询
    handleWorkloadStatQuery() {
      this.listWorkloadStat()
    },
    // 重置工作量列表查询
    resetWorkloadStatQuery() {
      this.queryWorkloadStatParams={}
      this.listWorkloadStat()
    },
    // 分页pageSize变化时触发
    handleSizeChange(val) {
      this.queryWorkloadParams.pageSize = val;
      // 重新查询
      this.listWorkload();
    },
    // 点击上一页  下一页，跳转到哪一页面时触发
    handleCurrentChange(val) {
      this.queryWorkloadParams.pageNum = val;
      // 重新查询
      this.listWorkload();
    },
  }
}
</script>
